<template>
  <div class="card-out-container"> 
    <CustomTable rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: 'calc(100vh - 390px)'}" :pagination="ipagination" @change="handleTableChange"
                 :showMore="showMore" :rowSelection="null" :operateMargin="true" :drag="false" storeTableName="inspectRecordTable" >

      <template #operateLeft>
        <div class="operate-left">
          <a-button type="primary" @click="exportTable">{{ $t('common.outputExcel') }}</a-button>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-form layout="inline" >
            <a-form-item :label= "$t('other.lineNumber')+'/'+$t('hangManage.stationNo')">
            <a-cascader v-model:value="stationNo" :show-search="{ filter }" :fieldNames="fieldNames" :options="selectArray" :placeholder="$t('other.pleaseSelectStation')" style="min-width: 200px" />
            </a-form-item>
            <a-form-item :label="$t('common.createTime')">
              <a-range-picker v-model:value="time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
                <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
              </a-space>
            </a-form-item>
          </a-form> 
        </div>
      </template>

<!--      <template #bodyCell="{ scope }">-->
<!--        <template v-if="scope.column.key === 'code'">-->
<!--          <span class="code-link">{{scope.record.code}} </span>-->
<!--        </template>-->
<!--      </template>-->

    </CustomTable> 
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns } from './modules/config.js' 
import { startTimeValue, endTimeValue, getLocalStorage } from '@/utils'
import { mapState } from 'vuex' 
import axios from "@/utils/request"; 
import CustomTable from '@/components/commonTable/customTable.vue'
export default {
  name: 'outputDetail',
  components:{
    CustomTable
  },
  mixins: [ListMixinPm],
  data () {
    return {
      columns: columns,
      spinning: false, 
      url: {
        list: '/api/report/get-inspection-records',
        exportUrl: '/api/report/export-inspection-records',
        station: '/api/device/hanger-line-bridge/three-level-pull-down'
      }, 
      fieldNames: {
        label: 'name',
        value: 'value',
        children: 'children'
      },
      selectArray: [],
      stationNo: [],
      time: [], 
      columnsArr: [],
      columnsTitleArr: []
    }
  },
  computed: {
    ...mapState({
       
    })
  }, 
  methods: { 
    filter (inputValue, path) {
      return path.some(option => option && option.name.toString().indexOf(inputValue) > -1)
    },
    getQueryParams () {
      return  {
        lineNo: this.stationNo ? (this.stationNo[0] || null) : null,
        stationNo: this.stationNo ? (this.stationNo[2] || null) : null,
        startTime: this.time?.length ? startTimeValue(this.time[0]) : null,
        endTime:this.time?.length ? endTimeValue(this.time[1]) : null,
        pageNo:this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        sortingFields: this.isorter.field ?  [this.isorter] : null
      }   
    }, 
    searchReset() {
      this.stationNo = []
      this.time = []
    },
    async exportTable(){ 
      await this.getColumnsList()
      let param = { No: 1, pageSize: 65335, columns:this.columnsArr ,tables:this.columnsTitleArr }
      this.exportExcels(this.url.exportUrl, this.$t('other.inspectionReport'), true, param)
    },
    async getThreeList () {
      const res = await axios.postAction(this.url.station)
      if (res.success) {
        let data = res.data
        data.forEach(i => {
          i.value = i.lineNo
          i.children = i.masterTrackList
          i.children && i.children.forEach(el => {
            el.value = el.id
            el.children = el.stationList
            el.children && el.children.forEach(i => {
              i.name = i.stationNo
              i.value = i.stationNo
            })
          })
        })
        this.selectArray = data
      }
    }, 
    async getColumnsList(){ 
      let paramsArr = []
      let titleArr = []
      let hangerTrackTable =  getLocalStorage("inspectRecordTable") ? getLocalStorage("inspectRecordTable") : columns

      if (hangerTrackTable && hangerTrackTable.length>0){
        hangerTrackTable.forEach( item =>{
          if (item.visibility){
            paramsArr.push(item.dataIndex)
            titleArr.push(item.title)
          }
        })
      }
      this.columnsArr = paramsArr
      this.columnsTitleArr = titleArr
    },
  }, 
  async created () {
    this.getThreeList()
  }

}
</script>
